<template>
  <div class="user-box">
    <el-row>
      <el-col :span="24">
        <div class="tool-box">
          <el-button type="primary" icon="el-icon-circle-plus-outline" size="small" @click="handleAdd()">新增</el-button>
        </div>
      </el-col>
    </el-row>
<!--  弹出层 -->
    <el-dialog width="600px" :title="dialogTitle" :visible.sync="questionFormVisible" >
      <el-form :model="form">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="题目描述" :label-width="formLabelWidth">
          <el-input v-model="form.stem" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项A" :label-width="formLabelWidth">
          <el-input v-model="form.optionA" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项B" :label-width="formLabelWidth">
          <el-input v-model="form.optionB" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项C" :label-width="formLabelWidth">
          <el-input v-model="form.optionC" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="选项D" :label-width="formLabelWidth">
          <el-input v-model="form.optionD" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="正确答案" :label-width="formLabelWidth">
          <el-input v-model="form.rightOption" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="解析" :label-width="formLabelWidth">
          <el-input v-model="form.analysis" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="作者" :label-width="formLabelWidth">
          <el-input v-model="form.createBy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="更新时间" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
                    v-model="form.updateAt"
                    type="datetime"
                    placeholder="选择日期时间"
                    align="right"
                    :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="questionFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>

    <el-table
      :data="questions"
      style="width: 100%">
      <el-table-column prop="id" label="题目id" />
      <el-table-column prop="stem" label="题干" />
      <el-table-column prop="optionA" label="选项A" />
      <el-table-column prop="optionB" label="选项B" />
      <el-table-column prop="optionC" label="选项C" />
      <el-table-column prop="optionD" label="选项D" />
      <el-table-column prop="rightOption" label="正确答案" />
      <el-table-column prop="analysis" label="解析" />
      <el-table-column prop="createBy" label="作者" />
      <el-table-column prop="updateAt" label="更新时间" width="100"/>
      <el-table-column label="是否推送" >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch(scope.row)">
          </el-switch>
        </template>
      </el-table-column>


      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            plain
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      :page-size="10"
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import * as requires from '../network/require'
  import utils from "../common/utils";

  export default {
    name:"questionBank",
    data () {
      return {
        questions: [
          {
            id: 1436513062335729666,
            stem: 'string',
            optionA: 'string',
            optionB: 'string',
            optionC: 'string',
            optionD: 'string',
            rightOption: 'A',
            analysis: '解释解释解释解释解释解释解释解释解释解释解释解释',
            createBy: '1',
            updateAt: '2021-09-11 10:12:58'
          }
        ],
        questionFormVisible: false,
        dialogTitle: '',
        form: {
          id: '',
          stem: '',
          optionA: '',
          optionB: '',
          optionC: '',
          optionD: '',
          rightOption: '',
          analysis: '',
          createBy: '',
          updateAt: null
        },
        formLabelWidth: '68px',
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        rowIndex: 9999,
        dialogType: '',  //弹出框类型
        total: 0  //页面总数据长度
      }
    },
    mounted() {
      this.getQuestions(1);
    },
    methods: {
      getQuestions(page) {
        requires.getQuestions(page).then(res => {
          console.log(res);
          this.questions = res.data.data.data;
          this.total = res.data.data.total;
        }).catch(err => {
          console.log(err);
        })
      },
      handleAdd() {
        this.dialogType = 'add';
        this.dialogTitle = '新增'
        this.form = {
          id: '',
          stem: '',
          optionA: '',
          optionB: '',
          optionC: '',
          optionD: '',
          rightOption: '',
          analysis: '',
          createBy: ''
        };
        this.questionFormVisible = true
      },
      submitForm() {
        this.questionFormVisible = false;
        if(this.dialogType === 'add') {
          this.form.updateAt = utils.transTime(this.form.updateAt);
          requires.addQuestion(this.form).then(res => {
            console.log(res);
            this.$message({
              type: 'success',
              message: `新增成功`
            })
            this.questions.unshift(this.form)
          }).catch(err => {
            console.log(err);
          })
        } else if (this.dialogType === 'edit') {
          requires.editQuestion(this.form.id, this.form).then(res => {
            console.log(res);
            this.$message({
              type: 'success',
              message: `修改成功`
            });
            this.questions.splice(this.rowIndex, 1, this.form);
          })
        }


      },
      changeSwitch(row) {
        requires.updateQuestion(row.id, row);
        this.$message({
          type: 'success',
          message: '成功'
        })
      },
      handleEdit(index, row) {
        this.dialogType = 'edit';
        this.dialogTitle = '编辑'
        this.form = Object.assign({}, row)
        this.questionFormVisible = true
        this.rowIndex = index
      },
      handleDelete(index, row) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          requires.deleteQuestion(row.id).then(res => {
            this.questions.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          })
        })
      },
      handleCurrentChange(val) {
        this.getQuestions(val);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .user-box {
    width: 100%;
    .tool-box {
      padding: 10px 10px;
      border-bottom: 1px solid #eee;
    }
    .el-pagination {
      margin-top: 20px;
    }
  }
</style>
